import styles from "./index.less"
import {useEffect, useState} from "react"
import {ScrollBoard} from '@jiaminghi/data-view-react'

const Table = () => {
    const ipArr=[
        '47.108.170.128',
        '47.109.51.105',
        '47.108.73.254',
        '47.108.170.128',
        '47.108.170.128',
        '47.109.51.105',
        '47.109.51.105',
        '47.108.73.254',
        '39.108.77.91',
        '39.108.77.91',
        '47.108.170.128',
        '47.108.24.2',
        '47.108.24.2',
        '47.108.170.128',
        '39.108.77.91',
        '47.108.24.2']
    const locationArr=["中国/重庆","中国/成都","中国/香港",'中国/杭州',"中国/北京","中国/上海"]
    const typeArr=["SQL注入","敏感信息泄露","未授权访问","XXE","远程命令执行","远程代码执行","CSRF","XSS","任意文件上传","反序列化漏洞","SSRF","Jsonp","通用组件漏洞","文件读取"]
    const data=[]
    ipArr.forEach(item=>{
        const label='label'+Math.ceil(Math.random()*4)
        const level=Math.ceil(Math.random()*4)
        let levelEle=''
        for (let i = 0; i < level; i++) {
            levelEle=levelEle+'<div class="level"></div>'
        }
        const element=`<div class=${label}>${levelEle}</div>`
        data.push(['<div class="out"><div class="round"></div></div>',item,locationArr[Math.floor(Math.random()*6)],typeArr[Math.floor(Math.random()*13)],element])
    })
    console.log(data)
    const config = {
        data:data,
        // data: [
        //     ['<div class="out"><div class="round"></div></div>', '资产名称资产', '位置位置位置...', '漏洞类型', '<div class="label1"><div class="level"></div><div class="level"></div></div>'],
        //     ['<div class="out"><div class="round"></div></div>', '资产名称资产', '位置位置位置...', '漏洞类型', '<div class="label2"><div class="level"></div><div class="level"></div><div class="level"></div></div>'],
        //     ['<div class="out"><div class="round"></div></div>', '资产名称资产', '位置位置位置...', '漏洞类型', '<div class="label3"><div class="level"></div><div class="level"></div><div class="level"></div><div class="level"></div></div>'],
        //     ['<div class="out"><div class="round"></div></div>', '资产名称资产', '位置位置位置...', '漏洞类型', '<div class="label4"><div class="level"></div><div class="level"></div><div class="level"></div><div class="level"></div></div>'],
        //     ['<div class="out"><div class="round"></div></div>', '资产名称资产', '位置位置位置...', '漏洞类型', '<div class="label2"><div class="level"></div><div class="level"></div></div>'],
        //     ['<div class="out"><div class="round"></div></div>', '资产名称资产', '位置位置位置...', '漏洞类型', '<div class="label3"><div class="level"></div><div class="level"></div><div class="level"></div><div class="level"></div></div>'],
        //     ['<div class="out"><div class="round"></div></div>', '资产名称资产', '位置位置位置...', '漏洞类型', '<div class="label1"><div class="level"></div><div class="level"></div></div>'],
        //     ['<div class="out"><div class="round"></div></div>', '资产名称资产', '位置位置位置...', '漏洞类型', '<div class="label2"><div class="level"></div><div class="level"></div></div>'],
        //     ['<div class="out"><div class="round"></div></div>', '资产名称资产', '位置位置位置...', '漏洞类型', '<div class="label3"><div class="level"></div></div>'],
        //     ['<div class="out"><div class="round"></div></div>', '资产名称资产', '位置位置位置...', '漏洞类型', '<div class="label2"><div class="level"></div></div>'],
        //     ['<div class="out"><div class="round"></div></div>', '资产名称资产', '位置位置位置...', '漏洞类型', '<div class="label1"><div class="level"></div><div class="level"></div><div class="level"></div><div class="level"></div></div>'],
        //     ['<div class="out"><div class="round"></div></div>', '资产名称资产', '位置位置位置...', '漏洞类型', '<div class="label3"><div class="level"></div><div class="level"></div><div class="level"></div><div class="level"></div></div>'],
        //     ['<div class="out"><div class="round"></div></div>', '资产名称资产', '位置位置位置...', '漏洞类型', '<div class="label4"><div class="level"></div><div class="level"></div><div class="level"></div><div class="level"></div></div>'],
        //     ['<div class="out"><div class="round"></div></div>', '资产名称资产', '位置位置位置...', '漏洞类型', '<div class="label2"><div class="level"></div><div class="level"></div><div class="level"></div><div class="level"></div></div>'],
        //     ['<div class="out"><div class="round"></div></div>', '资产名称资产', '位置位置位置...', '漏洞类型', '<div class="label3"><div class="level"></div><div class="level"></div><div class="level"></div><div class="level"></div></div>'],
        //     ['<div class="out"><div class="round"></div></div>', '资产名称资产', '位置位置位置...', '漏洞类型', '<div class="label4"><div class="level"></div><div class="level"></div><div class="level"></div><div class="level"></div></div>'],
        //     ['<div class="out"><div class="round"></div></div>', '资产名称资产', '位置位置位置...', '漏洞类型', '<div class="label1"><div class="level"></div><div class="level"></div><div class="level"></div><div class="level"></div></div>'],
        //     ['<div class="out"><div class="round"></div></div>', '资产名称资产', '位置位置位置...', '漏洞类型', '<div class="label1"><div class="level"></div><div class="level"></div><div class="level"></div><div class="level"></div></div>'],
        //
        //
        // ],
        oddRowBGC: 'rgba(255, 255, 255, 0.15)',
        evenRowBGC: 'rgba(255, 255, 255, 0)',
        columnWidth: [50],
        rowNum: 6,

    }


    return (
        <div className={styles.container}>
            <ScrollBoard config={config} className={styles.table}/>
        </div>
    )
}
export default Table